<template>
  <BasicTable @register="registerTable">
    <template #form-custom></template>
    <!--    <template v-if="checkedKeys.length > 0" #headerTop>
          <a-alert type="info" show-icon>
            <template #message>
              <template >
                <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
                <a-button type="link" @click="checkedKeys = []" size="small">清空</a-button>
              </template>

            </template>
          </a-alert>
        </template>-->
    <template #toolbar>
      <a-button type="primary" @click="handleCreate"> 新增</a-button>
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            icon: 'clarity:note-edit-line',
            onClick: handleEdit.bind(null, record),
          },
          {
            icon: 'ant-design:delete-outlined',
            color: 'error',
            popConfirm: {
              title: '是否确认删除',
              confirm: handleDelete.bind(null, record),
            },
          },
        ]"
      />
    </template>
  </BasicTable>
  <!--注册drawer  -->
  <WebsiteActivityDrawer @register="registerDrawer" @success="handleSuccess" />
</template>
<script lang="ts">
  import { defineComponent, ref, onMounted } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getBasicColumns, getFormConfig } from './websiteActivityTableData';
  import { Alert } from 'ant-design-vue';
  //编辑表单
  import WebsiteActivityDrawer from './websiteActivityDrawer.vue';
  //左侧拉板
  import { useDrawer } from '/@/components/Drawer';
  import {
    websiteActivityListApi,
    logicalRemoveById,
    websiteActivityScheduleListApi,
    websiteActivityExpertListApi,
    getWebsiteActivityVoByIdApi,
  } from '/@/api/website/websiteActivityApi';
  import { message } from 'ant-design-vue';

  export default defineComponent({
    components: { BasicTable, AAlert: Alert, WebsiteActivityDrawer, TableAction },
    setup() {
      const [registerDrawer, { openDrawer }] = useDrawer();
      const checkedKeys = ref<Array<string | number>>([]);

      const [registerTable, { reload, getForm, setTableData, setPagination, setLoading }] =
        useTable({
          title: '活动管理',
          columns: getBasicColumns(),
          useSearchForm: true,
          formConfig: getFormConfig(),
          showTableSetting: true,
          rowKey: 'activityId',
          bordered: true,
          showIndexColumn: true,
          actionColumn: {
            width: 80,
            title: '操作',
            dataIndex: 'action',
            slots: { customRender: 'action' },
          },
          api: websiteActivityListApi,
          fetchSetting: {
            pageField: 'current',
            // 每页显示多少条
            sizeField: 'pageSize',
            // 请求结果列表字段  支持 a.b.c
            listField: 'records',
            totalField: 'total',
          },
        });

      function handleCreate() {
        openDrawer(true, {
          isUpdate: false,
        });
      }

      async function handleEdit(record: Recordable) {
        const data = await getWebsiteActivityVoByIdApi(record.activityId);
        const activityScheduleList = await websiteActivityScheduleListApi( record.activityId,
        );
        const activityExpertList = await websiteActivityExpertListApi(record.activityId);

        data.activityScheduleList = activityScheduleList;
        data.activityExpertList = activityExpertList;
        openDrawer(true, {
          data,
          isUpdate: true,
        });
      }

      async function handleDelete(record: Recordable) {
        await logicalRemoveById(record.activityId);
        reload();
        message.success('删除成功');
      }

      function handleSuccess() {
        reload();
      }

      onMounted(() => {});

      return {
        registerTable,
        checkedKeys,
        handleCreate,
        handleEdit,
        handleDelete,
        handleSuccess,
        registerDrawer,
      };
    },
  });
</script>
